---
title: Accessibility
redirect_from:
  - /components/wizard/accessibility/
---

## Accessibility

The Wizard component has been designed with accessibility in mind, providing a step-by-step navigation pattern that is fully keyboard accessible and screen reader compatible.

### Accessibility Props

**Wizard props:**

| Name          | Type         | Description                                                                                                                                               |
| :------------ | :----------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id            | `string`     | Required. Provides a unique identifier for the wizard, used for ARIA relationships between the toggle button and wizard content in compact (mobile) mode. |
| labelClose    | `string`     | Specifies the accessible label for the close button in compact mode. Default is "Close".                                                                  |
| labelProgress | `React.Node` | Provides progress information that is announced by screen readers in compact mode, typically showing current step and total steps (e.g., "Step 2 of 5").  |

**WizardStep props:**

| Name        | Type      | Description                                                                                                                                                                                                             |
| :---------- | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title       | `string`  | Required. Provides the accessible name for each step, announced by screen readers when navigating through the wizard.                                                                                                   |
| isCompleted | `boolean` | When true, displays a visual checkmark icon instead of the step number. This is purely visual and does not affect screen reader announcements. This is useful when you want to indicate that a step has been completed. |

### Automatic Accessibility Features

**Wizard component:**

- The component automatically manages ARIA attributes in compact mode:
  - `aria-controls` connects the toggle button to the wizard content
  - `aria-expanded` reflects the open/closed state of the wizard
- Focus management is handled automatically:
  - In desktop mode, focus is properly managed when navigating through the wizard
  - In compact mode, focus is properly managed when opening/closing the wizard
- Semantic structure is handled automatically:
  - The component renders as a semantic `<nav>` element with an unordered list structure
  - In compact mode, the wizard opens in a modal with proper focus trapping and focus management

**WizardStep component:**

- The component automatically manages ARIA attributes:
  - `aria-current="step"` is applied to the currently active step to indicate the user's position in the wizard
  - `role="button"` and `tabIndex="0"` are applied to clickable steps in desktop mode
- Focus management is handled automatically:
  - Interactive steps are included in the tab order and can be activated with keyboard
- State management is handled automatically:
  - Step status (completed, available, disabled) is communicated through visual styling and ARIA states

### Best Practices

- Always provide a descriptive `labelProgress` that clearly indicates the user's position in the process (e.g., "Step 2 of 5").
- Use clear and concise step titles that describe the content or action for each step.
- Ensure the `id` prop is unique across the page to avoid conflicts with ARIA relationships.
- Consider the step sequence carefully - users should be able to understand their progress and what comes next.
- In compact mode, the wizard opens in a modal, so ensure the rest of your interface can handle the modal overlay appropriately.

### Keyboard Navigation

The Wizard component supports the following keyboard interactions:

**Desktop mode:**

- **Tab:** Moves focus to the next available (clickable) step
- **Shift + Tab:** Moves focus to the previous available step
- **Enter:** Activates the focused step and triggers the `onChangeStep` callback

**Compact (mobile) mode:**

- **Tab:** Moves focus to the wizard toggle button
- **Enter/Space:** Opens the wizard modal
- **Tab (within modal):** Navigates through available steps and the close button
- **Enter/Space (on step):** Selects the step and closes the modal
- **Enter/Space (on close button):** Closes the modal
- **Escape:** Closes the modal (handled by the Modal component)

### Example

```jsx
<Wizard
  id="booking-wizard"
  activeStep={1}
  completedSteps={2}
  labelProgress="Step 2 of 5"
  onChangeStep={stepIndex => setActiveStep(stepIndex)}
>
  <WizardStep title="Search flights" />
  <WizardStep title="Passenger details" />
  <WizardStep title="Select seats" />
  <WizardStep title="Add extras" />
  <WizardStep title="Payment" />
</Wizard>
```

Screen reader announces, when focused on the active step in desktop mode: "Passenger details, current step, button"
Screen reader announces, when focused on the toggle button in compact mode: "Step 2 of 5, Passenger details, collapsed, button, group"
Screen reader announces, when focused on the active step in compact mode: "Passenger details, current step, button, group"
